<template>
  <div class="box" v-show="eShow">
    <Row>
      <Col span="16" class="boxMain">
        <h2>趋势情况</h2>
        <div id="echartsQk" :style="{ width: width + 'px', height: height + 'px'}"></div>
      </Col>
      <Col span="8" class="boxMain">
        <h2>申请渠道统计</h2>
        <div id="echartsQd" :style="{ width: width + 'px', height: height + 'px'}"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      split1: 0.5,
      eShow: true
    }
  },
  mounted () {
    this.ecQK()
    this.ecQd()
  },
  props: {
    width: {
      type: String,
      default: () => {
        return '100%'
      }
    },
    height: {
      type: Number,
      default: () => {
        return 580
      }
    }
  },
  methods: {
    ecQK () {
      var chartDom = document.getElementById('echartsQk')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        // title: {
        //   text: 'Stacked Line'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: -2,
          left: 20,
          itemGap: 5, // 图例每项之间的间隔
          height: 10,
          itemWidth: 15, // 图例标记的图形宽度
          itemHeight: 10,
          padding: [5, 0, 0, 0],
          textStyle: {
            padding: [1, 0, 0, -5]
          },
          data: ['最低生活保障', '特困人员供养', '临时救助']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '特困人员供养',
            type: 'line',
            data: [400000, 380000, 700000, 670000, 2129297, 2600000, 2400000, 1703333, 1185555, 1234567, 1647894, 1301234],
            itemStyle: {
              normal: {
                color: 'green'
              }
            }
          },
          {
            name: '最低生活保障',
            type: 'line',
            data: [550000, 490000, 900000, 800000, 3429297, 3900000, 3500000, 2803333, 2285555, 1334567, 1747894, 1401234],
            itemStyle: {
              normal: {
                color: 'skyblue'
              }
            }
          },
          {
            name: '临时救助',
            type: 'line',
            data: [303000, 320000, 600000, 770000, 2829297, 4000000, 3400000, 3703333, 2485555, 2234567, 4647894, 2301234],
            itemStyle: {
              normal: {
                color: 'yellow'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    ecQd () {
      var chartDom = document.getElementById('echartsQd')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          data: ['窗口', 'APP', '公众号']
        },
        series: [
          {
            name: '窗口',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 13, name: '公众号' },
              { value: 37, name: '窗口' },
              { value: 49, name: 'APP' }
            ]
          }
          // {
          //   name: '',
          //   z: -1,
          //   type: 'gauge',
          //   radius: '-50%',
          //   center: [`50%`, `50%`],
          //   // 配置中间的数字
          //   detail: {
          //     // 调节数字位置
          //     offsetCenter: [0, 20],
          //     fontSize: 30
          //   },
          //   pointer: {
          //     show: false
          //   },
          //   axisTick: {
          //     show: false
          //   },
          //   axisLine: {
          //     show: false
          //   },
          //   splitLine: {
          //     show: false
          //   },
          //   axisLabel: {
          //     show: false
          //   },
          //   // 中间的字和数字 数据
          //   data: [
          //     {
          //       value: 1430,
          //       name: '总件数'
          //     }
          //   ]
          // }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
 .box{
      width: 100%;
      height: 100%;
      background: #f5f5f5;
  }
  .box h2 {
    margin-bottom: 24px;
  }
  .box .btnN{
    width: 40px;
    height: 20px;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(to left, #FF515A, #FFDD53);
    color: #fff;
  }
  .eMain {
    display: flex;
  }
  .box .boxMain {
    width: 94%;
    height: 100%;
    background: #fff;
  }
  .ybCol {
    height: 290px;
    text-align: center;
  }
  .ybCol p {
    margin-bottom: 8px;
  }
</style>
